<template>
  <view class="">
    <view class="wrap">
      <u-form labelPosition="left" :model="model" :rules="rules" ref="uForm" :errorType="errorType">
        <u-form-item label-width="80" label="房型" required left-icon="home" :leftIconStyle="{color:'#d5d5d5'}">
          <u-radio-group v-model="model.houseNum" placement="row" wrap>
            <u-radio v-for="(item, index) in selectList[0]" placement="row" :key="index" :label="item.text" :name="item.text"></u-radio>
          </u-radio-group>
          <u-radio-group v-model="model.houseHall" placement="row" wrap>
            <u-radio v-for="(item, index) in selectList[1]" placement="row" :key="index" :label="item.text" :name="item.text"></u-radio>
          </u-radio-group>
          <u-radio-group v-model="model.toiletNum" placement="row" wrap>
            <u-radio v-for="(item, index) in selectList[2]" placement="row" :key="index" :label="item.text" :name="item.text"></u-radio>
          </u-radio-group>
        </u-form-item>
        <u-form-item label="房屋面积" prop="houseArea" label-width="90" left-icon="map" :leftIconStyle="{color:'#d5d5d5'}">
          <u-input placeholder="请输入面积" v-model="model.houseArea" border="bottom" type="number">
            <u-text text="㎡" slot="suffix" margin="0 3px 0 0" type="tips"></u-text>
          </u-input>
        </u-form-item>
        <u-form-item label="房价" prop="everyprice" label-width="80" left-icon="rmb-circle" :leftIconStyle="{color:'#d5d5d5'}">
          <u-input border="bottom" type="text" placeholder="请填写房价" v-model="model.everyprice">
            <u-text text="元/㎡" slot="suffix" margin="0 3px 0 0" type="tips"></u-text>
          </u-input>
        </u-form-item>
        <u-form-item label="总金额" prop="totalprice" label-width="80" left-icon="rmb-circle" :leftIconStyle="{color:'#d5d5d5'}">
          <u-input border="bottom" type="text" placeholder="请选择总价" v-model="model.totalprice">
            <u-text text="元" slot="suffix" margin="0 3px 0 0" type="tips"></u-text>
          </u-input>
        </u-form-item>
        <u-form-item label-width="90" label="付款方式" left-icon="rmb-circle" :leftIconStyle="{color:'#d5d5d5'}">
          <u-radio-group v-model="model.payType" placement="row" wrap>
            <u-radio v-for="(item, index) in payTypeList" placement="row" :key="index" :label="item.label" :name="item.label"></u-radio>
          </u-radio-group>
        </u-form-item>

        <u-form-item label="详细地址" prop="address" label-width="90" left-icon="file-text" :leftIconStyle="{color:'#d5d5d5'}">
          <u-input border="bottom" placeholder="请输入详细地址(必填)" v-model="model.address" type="text"></u-input>
        </u-form-item>

        <u-form-item label="朝向" label-width="80" left-icon="home" :leftIconStyle="{color:'#d5d5d5'}">
          <u-radio-group v-model="model.direction" placement="row" wrap>
            <u-radio v-for="(item, index) in directionList" placement="row" :key="index" :label="item.label" :name="item.label"></u-radio>
          </u-radio-group>
        </u-form-item>

        <u-form-item label="门牌号" prop="houseNo" label-width="80" left-icon="home" :leftIconStyle="{color:'#d5d5d5'}">
          <u-input border="bottom" v-model="model.houseNo" placeholder="请输入门牌号(必填)" type="text"></u-input>
        </u-form-item>
        <u-form-item label="装修" prop="decoration" label-width="80" left-icon="eye" :leftIconStyle="{color:'#d5d5d5'}">
          <u-radio-group v-model="model.decoration" placement="row" wrap>
            <u-radio v-for="(item, index) in decorationList" placement="row" :key="index" :label="item.label" :name="item.label"></u-radio>
          </u-radio-group>
        </u-form-item>
        <u-form-item label="房源图片" label-width="80">
          <u-upload :fileList="fileList" @afterRead="afterRead" :previewFullImage="true" :max-size="10 * 1024 * 1024" @delete="deletePic" name="file" multiple :maxCount="3"></u-upload>
        </u-form-item>
        
        <u-form-item label-width="100" label="房源亮点" left-icon="phone" :leftIconStyle="{color:'#d5d5d5'}">
          <u-checkbox-group v-model="model.params" placement="column">
            <u-checkbox v-for="(item, index) in checkboxList" :key="index" :label="item.name" :name="item.name">
            </u-checkbox>
          </u-checkbox-group>
        </u-form-item>
        <u-form-item label="小区名称" label-width="90" left-icon="map" :leftIconStyle="{color:'#d5d5d5'}">
          <uni-data-select v-model="model.villageName" placeholder="请选择小区(必选)" :localdata="villageList">
          </uni-data-select>
        </u-form-item>
        <u-form-item label="小区房型" label-width="90" left-icon="map" :leftIconStyle="{color:'#d5d5d5'}">
          <uni-data-select v-model="model.villagetype" placeholder="请选择小区(必选)" :localdata="villagetypeList">
          </uni-data-select>
        </u-form-item>
        <u-form-item label="户主姓名" prop="ownerName" label-width="90" left-icon="account" :leftIconStyle="{color:'#d5d5d5'}">
          <u-input border="bottom" placeholder="请输入房东姓名(必填)" v-model="model.ownerName" type="text"></u-input>
        </u-form-item>
        <u-form-item label="户主电话" prop="owerPhone" label-width="90" left-icon="phone" :leftIconStyle="{color:'#d5d5d5'}">
          <u-input border="bottom" placeholder="请输入房东电话(必填)" v-model="model.owerPhone" type="number" maxlength="11"></u-input>
        </u-form-item>
      </u-form>
    </view>
    <view class="bottom-btn">
      <u-button type="primary" @click="submit">保存</u-button>
    </view>
  </view>
</template>

<script>
export default {
  watch: {
    'model.houseArea': {
      handler(val) {
        this.model.totalprice = val * this.model.everyprice
      },
      deep: true
    },
    'model.everyprice': {
      handler(val) {
        this.model.totalprice = val * this.model.houseArea
      },
      deep: true
    }
  },
  methods: {
    // 删除图片
    deletePic(event) {
      this.fileList.splice(event.index, 1)
    },
    // 新增图片
    afterRead(event) {
      // console.log(event)
      let fileList = event.file
      uni.uploadFile({
        url: 'http://127.0.0.1:80/upload', // 仅为示例，非真实的接口地址
        filePath: fileList[0].url,
        name: 'file',
        formData: {
          folderName: 'test'
        },
        success: ({ data }) => {
          let back = JSON.parse(data)
          let url = 'http://127.0.0.1:80' + back.data.filePath
          // console.log(url)
          this.fileList.push({ url })
        }
      })
    },
    submit() {
       this.model.imageList = this.fileList.map((item) => {
        return item.url
      })
      this.model.faceUrl = this.fileList[0].url
      let url = 'http://127.0.0.1/addsale'
      uni.request({
        url: url,
        data: {
          model: JSON.stringify(this.model)
        },
        success: (res) => {
          uni.showToast({
            icon: 'success',
            title: '保存成功'
          })
          setTimeout(() => {
            uni.redirectTo({
              url: '/pages/sale/saleList'
            })
          }, 1000)
        }
      })
    }
  },
  data() {
    return {
      model: {
        houseNum: '三室',
        houseHall: '一厅',
        toiletNum: '独卫',
        houseArea: '',
        everyprice: '',
        totalprice: '',
        introduce: '',
        params: ['独立阳台', '地铁近', '学校近'],
        direction: '南北',
        payType: '全款',
        //装修
        decoration: '精装',
        //房东
        ownerName: '',
        //房东电话
        owerPhone: '',
        villageName: '盛世豪庭',
        villagetype: '复式户型',
         agentName: '欧阳修',
        agentPhone: "12345678910",
        villagegreen: "78",
        villageyear: "2014-07-08",
        agentAvatar: 'https://cdn.uviewui.com/uview/album/1.jpg',
        villageintroduce:`位于浦东区张江板块的中部偏西区域，小区于2006年峻工，物业地址是：晨晖路825弄。是由上海张江微电子港有限公司开发建设，小区总建筑面积约160000㎡，容积率约1.4，约有52栋商品房住宅，是由小高层和高层组成，小区内户型有2-5居室，户型面积约74㎡-254㎡，户型方正，适合刚需和改善型人群; 小区绿化率约40%，环境较好。小区是对口的学校依次是：张江集团中学和张江高科实验小学（藿香路校区）和经典幼儿园。`,
      },
      fileList: [],
      selectList: [
        [
          {
            text: '一室',
            label: '一室'
          },
          {
            text: '二室',
            label: '二室'
          },
          {
            text: '三室',
            label: '三室'
          },
          {
            text: '四室',
            label: '四室'
          }
        ],
        [
          {
            text: '一厅',
            label: '一厅'
          },
          {
            text: '二厅',
            label: '二厅'
          },
          {
            text: '三厅',
            label: '三厅'
          }
        ],
        [
          {
            text: '独卫',
            label: '独卫'
          },
          {
            text: '二卫',
            label: '二卫'
          }
        ]
      ],
      actionSheetList: [
        {
          text: '电梯房'
        },
        {
          text: '楼梯房'
        }
      ],
      directionList: [
        {
          value: '东西',
          label: '东西'
        },
        {
          value: '南北',
          label: '南北'
        }
      ],
      decorationList: [
        {
          label: '简装',
          value: '简装'
        },
        {
          label: '中装',
          value: '中装'
        },
        {
          label: '精装',
          value: '精装'
        },
        {
          label: '豪装',
          value: '豪装'
        }
      ],
      payTypeList: [
        {
          label: '全款',
          value: '全款'
        },
        {
          label: '分期',
          value: '分期'
        }
      ],
      rules: {
        houseArea: {
          type: 'string',
          required: true,
          message: '请填房屋面积',
          trigger: ['blur', 'change']
        },
        houseNo: {
          type: 'string',
          required: true,
          message: '请输入门牌号',
          trigger: ['blur', 'change']
        },
        totalprice: {
          type: 'string',
          required: true,
          message: '请输入总金额',
          trigger: ['blur', 'change']
        },
        ownerName: {
          type: 'string',
          required: true,
          message: '请输入姓名',
          trigger: ['blur', 'change']
        },
        owerPhone: {
          type: 'string',
          required: true,
          message: '请输入电话',
          trigger: ['blur', 'change']
        },
        everyprice: {
          type: 'string',
          required: true,
          message: '请输入价格',
          trigger: ['blur', 'change']
        }
      },
      checkboxList: [
        {
          name: '看房方便'
        },
        {
          name: '押一付一'
        },
        {
          name: '独立阳台'
        },
        {
          name: '智能锁'
        },
        {
          name: '地铁近'
        },
        {
          name: '学校近'
        },
        {
          name: '免物业费'
        },
        {
          name: '民用水电'
        }
      ],
      villageList: [
        { value: '盛世豪庭', text: '盛世豪庭' },
        { value: '嘉林景苑', text: '嘉林景苑' },
        { value: '锦绣雷庭', text: '锦绣雷庭' },
        { value: '紫金苑', text: '中央公馆' },
        { value: '云海山庄', text: '云海山庄' },
        { value: '洲际观天下', text: '洲际观天下' }
      ],
      villagetypeList: [
        { value: '复式户型', text: '复式户型' },
        { value: '电梯平层Ⅰ（平层两房+三房）', text: '电梯平层Ⅰ（平层两房+三房）' },
        { value: '电梯平层Ⅱ（小三房）', text: '电梯平层Ⅱ（小三房）' },
        { value: '电梯平层Ⅲ（大三房）', text: '电梯平层Ⅲ（大三房）' },
        { value: '电梯顶楼复式', text: '电梯顶楼复式' }
      ]
    }
  }
}
</script>

<style lang="scss">
	.wrap{
		background-color: #fff;
	}
</style>
